<template>
  <div>
    <van-nav-bar title="预约洗衣" left-text="返回" left-arrow class="custom-nav-bar" @click-left="onClickLeft" />
    <van-tree-select class="custom-nav-bar vant-bg" v-model:main-active-index="activeIndex" height="100vh"
      :items="items" @click-nav="clickNav">
      <template #content>
        <div class="carView-right" v-if="activeIndex === 0" height="600px">
          <div class="swipe-gg">
            <div class="card" v-for="item, index in shoplist" :key="index">
              <div class="left">
                <img :src="item.pro_img" mode="" />
              </div>
              <div class="right">
                <div class="title">{{ item.pro_title }}</div>
                <div class="cost">
                  <div>
                    <div class="price">￥{{ item.pro_price }}</div>
                    <div class="before-price">
                      ￥{{ item.pro_oldprice }}
                      <div class="line"></div>
                    </div>
                  </div>
                  <div class="number">
                    <button class="addCar" v-if="item.pro_num == 0" @click="addCar(index, item.pro_id, item.pro_num)">
                      加入购物车
                    </button>
                    <button class="subtract" v-if="item.pro_num > 0"
                      @click="subtractNum(index, item.pro_id, item.pro_num)">
                      <div class="subtract-j">-</div>
                    </button>
                    <div class="num" v-if="item.pro_num > 0">{{ item.pro_num }}</div>
                    <div class="add" v-if="item.pro_num > 0" @click="addNum(index, item.pro_id, item.pro_num)">
                      <div class="add-j">+</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carView-right" v-if="activeIndex === 1">
          <div class="swipe-gg">
            <div class="card" v-for="item, index in shoplist" :key="index">
              <div class="left">
                <img :src="item.pro_img" mode="" />
              </div>
              <div class="right">
                <div class="title">{{ item.pro_title }}</div>
                <div class="cost">
                  <div>
                    <div class="price">￥{{ item.pro_price }}</div>
                    <div class="before-price">
                      ￥{{ item.pro_oldprice }}
                      <div class="line"></div>
                    </div>
                  </div>
                  <div class="number">
                    <button class="addCar" v-if="item.pro_num == 0" @click="addCar(index, item.pro_id, item.pro_num)">
                      加入购物车
                    </button>
                    <button class="subtract" v-if="item.pro_num > 0"
                      @click="subtractNum(index, item.pro_id, item.pro_num)">
                      <div class="subtract-j">-</div>
                    </button>
                    <div class="num" v-if="item.pro_num > 0">{{ item.pro_num }}</div>
                    <div class="add" v-if="item.pro_num > 0" @click="addNum(index, item.pro_id, item.pro_num)">
                      <div class="add-j">+</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carView-right" v-if="activeIndex === 2">
          <div class="swipe-gg">
            <div class="card" v-for="item, index in shoplist" :key="index">
              <div class="left">
                <img :src="item.pro_img" mode="" />
              </div>
              <div class="right">
                <div class="title">{{ item.pro_title }}</div>
                <div class="cost">
                  <div>
                    <div class="price">￥{{ item.pro_price }}</div>
                    <div class="before-price">
                      ￥{{ item.pro_oldprice }}
                      <div class="line"></div>
                    </div>
                  </div>
                  <div class="number">
                    <button class="addCar" v-if="item.pro_num == 0" @click="addCar(index, item.pro_id, item.pro_num)">
                      加入购物车
                    </button>
                    <button class="subtract" v-if="item.pro_num > 0"
                      @click="subtractNum(index, item.pro_id, item.pro_num)">
                      <div class="subtract-j">-</div>
                    </button>
                    <div class="num" v-if="item.pro_num > 0">{{ item.pro_num }}</div>
                    <div class="add" v-if="item.pro_num > 0" @click="addNum(index, item.pro_id, item.pro_num)">
                      <div class="add-j">+</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carView-right" v-if="activeIndex === 3">
          <div class="swipe-gg">
            <div class="card" v-for="item, index in shoplist" :key="index">
              <div class="left">
                <img :src="item.pro_img" mode="" />
              </div>
              <div class="right">
                <div class="title">{{ item.pro_title }}</div>
                <div class="cost">
                  <div>
                    <div class="price">￥{{ item.pro_price }}</div>
                    <div class="before-price">
                      ￥{{ item.pro_oldprice }}
                      <div class="line"></div>
                    </div>
                  </div>
                  <div class="number">
                    <button class="addCar" v-if="item.pro_num == 0" @click="addCar(index, item.pro_id, item.pro_num)">
                      加入购物车
                    </button>
                    <button class="subtract" v-if="item.pro_num > 0"
                      @click="subtractNum(index, item.pro_id, item.pro_num)">
                      <div class="subtract-j">-</div>
                    </button>
                    <div class="num" v-if="item.pro_num > 0">{{ item.pro_num }}</div>
                    <div class="add" v-if="item.pro_num > 0" @click="addNum(index, item.pro_id, item.pro_num)">
                      <div class="add-j">+</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carView-right" v-if="activeIndex === 4">
          <div class="swipe-gg">
            <div class="card" v-for="item, index in shoplist" :key="index">
              <div class="left">
                <img :src="item.pro_img" mode="" />
              </div>
              <div class="right">
                <div class="title">{{ item.pro_title }}</div>
                <div class="cost">
                  <div>
                    <div class="price">￥{{ item.pro_price }}</div>
                    <div class="before-price">
                      ￥{{ item.pro_oldprice }}
                      <div class="line"></div>
                    </div>
                  </div>
                  <div class="number">
                    <button class="addCar" v-if="item.pro_num == 0" @click="addCar(index, item.pro_id, item.pro_num)">
                      加入购物车
                    </button>
                    <button class="subtract" v-if="item.pro_num > 0"
                      @click="subtractNum(index, item.pro_id, item.pro_num)">
                      <div class="subtract-j">-</div>
                    </button>
                    <div class="num" v-if="item.pro_num > 0">{{ item.pro_num }}</div>
                    <div class="add" v-if="item.pro_num > 0" @click="addNum(index, item.pro_id, item.pro_num)">
                      <div class="add-j">+</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carView-right" v-if="activeIndex === 5">
          <div class="swipe-gg">
            <div class="card" v-for="item, index in shoplist" :key="index">
              <div class="left">
                <img :src="item.pro_img" mode="" />
              </div>
              <div class="right">
                <div class="title">{{ item.pro_title }}</div>
                <div class="cost">
                  <div>
                    <div class="price">￥{{ item.pro_price }}</div>
                    <div class="before-price">
                      ￥{{ item.pro_oldprice }}
                      <div class="line"></div>
                    </div>
                  </div>
                  <div class="number">
                    <button class="addCar" v-if="item.pro_num == 0" @click="addCar(index, item.pro_id, item.pro_num)">
                      加入购物车
                    </button>
                    <button class="subtract" v-if="item.pro_num > 0"
                      @click="subtractNum(index, item.pro_id, item.pro_num)">
                      <div class="subtract-j">-</div>
                    </button>
                    <div class="num" v-if="item.pro_num > 0">{{ item.pro_num }}</div>
                    <div class="add" v-if="item.pro_num > 0" @click="addNum(index, item.pro_id, item.pro_num)">
                      <div class="add-j">+</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </template>
    </van-tree-select>

    <div class="carView-bottom">
      <div class="pic" @click="carPic">
        <img class="carpic" src="../../assets/icon/icon_car.png" alt="" />
        <div class="round">{{ state.sum }}</div>
      </div>
      <div class="carView-bottom-price">
        <div>￥{{ price }}</div>
        <div class="carView-bottom-text">已省￥{{ text }}</div>
      </div>
      <div><button class="yuyue" type="button" @click="gosureorder">立即预约</button></div>
    </div>

    <!-- 弹出层 -->
    <div>
      <van-popup class="custom-bottom-popup" v-model:show="showBottom" :overlay-style="overlayStyle"
        :style="{ height: '40%' }" position="bottom">
        <div class="wrapper">
          <div class="block">
            <div class="head">
              <div style="color: #ff9f6a">该单可优惠263.00元</div>
              <button class="empty" @click="emptyCar">清空购物车</button>
            </div>
            <div>
              <div class="car-empty" v-if="state.sum == 0">
                <img src="../../assets/img/l_empty.png" alt="" />
                <p>购物车空空如也，赶紧选购吧！</p>
              </div>
              <div class="car-list" v-else v-for="item, index in selectlist" :key="index">

                <div class="card" v-if="item.pro_num > 0">
                  <div class="left">
                    <img :src="item.pro_img" mode="" />
                  </div>
                  <div class="right">
                    <div class="title">{{ item.pro_title }}</div>
                    <div class="cost">
                      <div>
                        <div class="price">￥{{ item.pro_price }}</div>
                        <div class="before-price">
                          ￥{{ item.pro_oldprice }}
                          <div class="line"></div>
                        </div>
                      </div>
                      <div class="number">
                        <button class="addCar" v-if="item.pro_num == 0"
                          @click="addCar(index, item.pro_id, item.pro_num)">
                          加入购物车
                        </button>
                        <button class="subtract" v-if="item.pro_num > 0"
                          @click="subtractNum(index, item.pro_id, item.pro_num)">
                          <div class="subtract-j">-</div>
                        </button>
                        <div class="num" v-if="item.pro_num > 0">{{ item.pro_num }}</div>
                        <div class="add" v-if="item.pro_num > 0" @click="addNum(index, item.pro_id, item.pro_num)">
                          <div class="add-j">+</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-b">
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Http, Token } from "../../utils/request";
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { reactive } from "vue";

const router = useRouter();
const activeIndex = ref(0);
const state = reactive({
  nowPrice: 220,
  bfPrice: 250,
  num: 0,
  sum: 0,

});
const items = ref([]);
const menulist = ref([])
const shoplist = ref([])
const selectlist = ref([
  {}
])
const index = ref('')
const gosureorder = () => router.push("/sureorder");
const showBottom = ref(false);


// 分类接口
const menuData = () => {
  Http("/api/category", "get", {}).then((res: any) => {
    if (res.status === 200) {
      menulist.value = res.data;
      console.log(menulist);
      items.value = res.data.map((item: any) => {
        return {
          text: item.type_name,
        };
      });
    }
  });
};

// 产品接口
const shopData = (index: any) => {
  Http("/api/product", "get", { type_n: index }).then((res: any) => {
    if (res.status === 200) {
      res.data.forEach((item: any, index: any) => {
        item.pro_num = 0
      });
      shoplist.value = res.data;
      console.log(shoplist);
    }
  });
};

// 加入购物车接口
const sumCar = (pro_id: any, pro_num: any) => {
  Token("/api/car", "post", {
    pro_id: pro_id,
    pro_num: pro_num,
  }).then((res: any) => {
    if (res.status === 200) {
      console.log(res);
    }
  });

}

// 获取购物车 接口
const selectCar = () => {
  Token("/api/car", "get", {}).then((res: any) => {
    if (res.status === 200) {
      selectlist.value = res.data;
      let n: number = 0
      res.data.forEach((item: any) => {
        n += Number(item.pro_num)
      });
      state.sum = n
    }
  });
}

//删除购物车接口
// const deleteCar = (pro_id:any) => {
//   Token("/api/car", "delete", {pro_id:pro_id}).then((res: any) => {
//     if (res.status === 200) {
//       console.log(res);
//     }
//   });
// }

//清空购物车接口 /api/carAll
const emptyCarApi = () => {
  Token("/api/carAll", "get", {}).then((res: any) => {
    if (res.status === 200) {
      console.log(res);
    }
  });
}

onMounted(() => {
  menuData()
  shopData(0)
  selectCar()
})


const carPic = () => {
  showBottom.value = true
  selectCar()
}
const emptyCar = () => {
  emptyCarApi()
  selectCar()
  setTimeout(() => {
    showBottom.value = false;
  }, 2000);
};

const overlayStyle = computed(() => ({
  background: `linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.7) calc(100% - 170px),
    transparent calc(100% - 170px)
  )`,
}));

const clickNav = (e: any) => {
  index.value = e
  shopData(index.value)
}

const subtractNum = (index: any, pro_id: any,) => {
  shoplist.value[index].pro_num--;
  selectCar()
  sumCar(pro_id, shoplist.value[index].pro_num)
};

const addNum = (index: any, pro_id: any,) => {
  shoplist.value[index].pro_num++;
  selectCar()
  sumCar(pro_id, shoplist.value[index].pro_num)
};

const addCar = (index: any, pro_id: any,) => {
  shoplist.value[index].pro_num++;
  selectCar()
  sumCar(pro_id, shoplist.value[index].pro_num)
};
const active = ref(0);
const onClickLeft = () => {
  router.push("/");
  active.value = 0;
};

const price = ref(89.0);
const text = ref(260);
</script>

<style>
@import url("../car/carView.css");
</style>